<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mellife</title>
  <link rel="stylesheet" href="./assets/lib/css/bootstrap.min.css">
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="life-index">

    <header class="life-header">
      <div class="header-top color-black-9">
    
        <!-- 移动端展示 -->
        <div class="header-top-item header-phone-top-left">
          <span class="menu-icon"></span>
        </div>

        <div class=" header-top-center flex-content-center">
          <div class="header-logo">
            <div class="logo-box">
              <span class="logo-top color-black-highlight">Mellife</span> 
              <span class="logo-bottom">
                <i></i>
                <i></i>
                <i></i>
              </span>
            </div>
          </div>
        </div>

        <div class="header-top-item header-phone-top-right">
          <span class="search-icon"></span>
          <span class="user-icon"></span>
        </div>

        <div class="header-top-right text-right">
          <div class="header-user flex-align-center justify-content-end ">
            <span class="user-icon"></span>
            <span class="user-text">Sing in</span>
          </div>
        </div>

      </div>
      <div class="header-bottom">
        <div class="flex header-bottom-left">
          <div class="header-dropdown">
            <div class="dropdown-check flex-align-center color-black-6">
              <span>Bergstromtown</span>
              <span class="down-icon"></span>
            </div>
            <div class="dropdown-menu"></div>
          </div>
          <div class="header-weather flex-align-center">
            <span class="weather-icon"></span>
            <span class="weather-text color-black-6">+8°С</span>
          </div>
        </div>
        <div class="nav-scroll">
          <div class="flex header-nav">
            <div class="nav-item color-active">首页</div>
            <div class="nav-item">咨询</div>
            <div class="nav-item">美食</div>
            <div class="nav-item color-icon">
              折扣券
              <span class="nav-icon"></span>
            </div>
            <div class="nav-item">旅行</div>
            <div class="nav-item">生活家</div>
            <div class="nav-item">weCLUB</div>
          </div>
        </div>

        <div class="header-bottom-info color-black-6">
          <span class="bottom-info-title">今日汇率</span>
          <span class="bottom-info-text">澳币/人民币 4.76981</span>
        </div>

        <div class="flex align-items-center justify-content-center header-search">
          <span class="search-icon"></span>
        </div>


      </div>
    </header>

    <section class="life-content">
      <div class="container"> 
        <!-- first line -->
        <div class="row">
          <div class="col-md-3 col-12">
            <!-- recently news -->
            <div class="recent-new margin-b-30">
              <div class="recent-header flex justify-content-between align-items-center">
                <span class="recent-title">最近新闻</span>
                <span class="recent-icon">
                  <i></i>
                  <i></i>
                  <i></i>
                </span>
              </div>

              <div class="recent-content">
                <div class="new-item flex-column-center">
                  <div class="news-title">5 Ways to make your Bbq a memorable family event</div>
                  <div class="news-date">Yesterday, 7:04 PM</div>
                </div>
                <div class="new-item flex-column-center new-item-bg">
                  <div class="news-title">5 Ways to make your Bbq a memorable family event</div>
                  <div class="news-date">Yesterday, 7:04 PM</div>
                </div>
                <div class="new-item flex-column-center">
                  <div class="news-title">5 Ways to make your Bbq a memorable family event</div>
                  <div class="news-date">Yesterday, 7:04 PM</div>
                </div>
                <div class="new-item flex-column-center">
                  <div class="news-title">5 Ways to make your Bbq a memorable family event</div>
                  <div class="news-date">Yesterday, 7:04 PM</div>
                </div>
              </div>

              <div class="recent-showMore">
                SHOW MORE
              </div>
            </div>
          </div>
          <div class="col-md-6 col-12">          
            <div class="container">
              <div class="row news-pic margin-b-30">
                <img class="news-pic-img img-fluid" src="./assets/img/bg.jpg">
                <div class="news-pic-content">
                  <div class="share-icon"></div>
                  <div class="news-tag news-tag-voucher"><span class="tag-text">折扣券</span></div>
                  <div class="news-title">Peace On Earth A Wonderful Wish But No Way</div>
                  <div class="news-info-bar">
                    <span class="news-date">24 Jun, 5:40 PM</span>
                    <span class="news-views">275</span>
                    <span class="news-comment">12</span>
                    <span class="news-name">Andre McBride</span>
                  </div>
                </div>
              </div>
            </div>       
            <div class="row">
              <div class="col-md-6">
                <div class="news-item news-item-small margin-b-30">
                  <div class="news-item-tag news-item-tag-p news-tag-info"><span class="tag-text">资讯</span></div>
                  <div class="share-icon"></div>
                  <img class="news-item-h-img img-fluid" src="./assets/img/bg.jpg">
                  <div class="news-item-title">
                    Vampires The Romantic Ideology Behind Them
                  </div>
                  <div class="news-item-info-bar">
                    <span class="news-item-date">24 Jun, 5:40 PM</span>
                    <span class="news-item-comment">12</span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="news-item news-item-small news-item-a margin-b-30">
                  <div class="news-item-tag news-item-tag-p news-tag-food"><span class="tag-text">美食</span></div>
                  <div class="share-icon"></div>
                  <img class="news-item-a-img img-fluid" src="./assets/img/bg.jpg">
                  <div class="news-item-title">
                    Vampires The Romantic Ideology Behind Them
                  </div>
                  <div class="news-item-info-bar">
                    <span class="news-item-date">24 Jun, 5:40 PM</span>
                    <span class="news-item-comment">12</span>
                  </div>
                </div>
              </div>
            </div>              
          </div>
          <div class="col-md-3">
            <div class="container">
              <div class="row news-item news-item-large margin-b-30">
                <div class="news-item-tag news-item-tag-p news-tag-info"><span class="tag-text">最新</span></div>
                <div class="share-icon"></div>
                <img class="news-item-h-img img-fluid" src="./assets/img/bg.jpg">
                <div class="news-item-title">
                  5 Ways To Make Your Bbq A Memorable Family Event
                </div>
                <div class="news-item-info-bar">
                  <span class="news-item-date">24 Jun, 5:40 PM</span>
                  <span class="news-item-comment">12</span>
                </div>
              </div>
  
              <div class="row news-item news-item-small news-ins margin-b-30">
                <div class="news-item-tag news-tag-info news-ins-tag"><span class="tag-text">NUMBER</span></div>
                <div class="news-ins-number">1,256K</div>
                <div class="news-ins-follows">ins Followers</div>
              </div>
            </div>
            
          </div>
        </div>
        <!-- second line -->
        <div class="row">
          <div class="col-md-6">
            <div class="news-pic margin-b-30">
              <img class="news-pic-img img-fluid" src="./assets/img/bg.jpg">
              <div class="news-pic-content">
                <div class="news-tag "><span class="tag-text">生活家</span></div>
                <div class="news-title">15 Tips To Increase Your Adwords Profits</div>
                <div class="news-info-bar">
                  <span class="news-date">24 Jun, 5:40 PM</span>
                  <span class="news-views">275</span>
                  <span class="news-comment">12</span>
                  <span class="news-name">Andre McBride</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="news-item news-item-large margin-b-30">
              <div class="news-item-tag news-item-tag-p news-tag-info"><span class="tag-text">折扣</span></div>
              <div class="share-icon"></div>
              <img class="news-item-h-img img-fluid" src="./assets/img/bg.jpg">
              <div class="news-item-title">
                Regional Cuisine Down Home Southern Cooking
              </div>
              <div class="news-item-info-bar">
                <span class="news-item-date">24 Jun, 5:40 PM</span>
                <span class="news-item-comment">12</span>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="news-item news-item-large margin-b-30">
              <div class="news-item-tag news-item-tag-p news-tag-info"><span class="tag-text">旅行</span></div>
              <div class="share-icon"></div>
              <img class="news-item-h-img img-fluid" src="./assets/img/bg.jpg">
              <div class="news-item-title">
                E Banks That Accept Us Casino Players
              </div>
              <div class="news-item-info-bar">
                <span class="news-item-date">24 Jun, 5:40 PM</span>
                <span class="news-item-comment">12</span>
              </div>
            </div>
          </div>
        </div>


        <div class="row">
          <div class="col-md-9">
            <div class="we-club news-item-more-large margin-b-30">
              <div class="we-club-title">
                <div class="we-club-title_text color-black-6">WeCLUB</div>
                <div class="we-club-title_active">
                  <span class="font-10">发起活动</span>
                </div>
              </div>
              <div class="we-club-content">
                <div class="we-club-box container">
                  <div class="row we-club-scroll-container">
                    <div class="col-md-4">
                      <div class="we-club-item">
                        <img class="club-item_img img-fluid" src="./assets/img/bg.jpg" alt="" srcset="">
                        <div class="club-item_content">
                          <div class="item_content-date">24 Jun, 5:40 PM</div>
                          <div class="item_content-desc">
                            【活动攻略】在彩虹下奔跑，墨尔本绝不可错过，Color Run低价抢票开始！
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="we-club-item">
                        <img class="club-item_img img-fluid" src="./assets/img/bg.jpg" alt="" srcset="">
                        <div class="club-item_content">
                          <div class="item_content-date">24 Jun, 5:40 PM</div>
                          <div class="item_content-desc">
                            【活动攻略】在彩虹下奔跑，墨尔本绝不可错过，Color Run低价抢票开始！
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="we-club-item">
                        <img class="club-item_img img-fluid" src="./assets/img/bg.jpg" alt="" srcset="">
                        <div class="club-item_content">
                          <div class="item_content-date">24 Jun, 5:40 PM</div>
                          <div class="item_content-desc">
                              今天开抢票！一年只1次200+“禁忌”建筑解封，斥资$20,000,000修复的巨大建筑，因此是非常漂亮的唯一修复的完美建筑
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="we-club-item">
                        <img class="club-item_img img-fluid" src="./assets/img/bg.jpg" alt="" srcset="">
                        <div class="club-item_content">
                          <div class="item_content-date">24 Jun, 5:40 PM</div>
                          <div class="item_content-desc">
                            【活动攻略】在彩虹下奔跑，墨尔本绝不可错过，Color Run低价抢票开始！
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="we-club-item">
                        <img class="club-item_img img-fluid" src="./assets/img/bg.jpg" alt="" srcset="">
                        <div class="club-item_content">
                          <div class="item_content-date">24 Jun, 5:40 PM</div>
                          <div class="item_content-desc">
                            【活动攻略】在彩虹下奔跑，墨尔本绝不可错过，Color Run低价抢票开始！
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="we-club-item">
                        <img class="club-item_img img-fluid" src="./assets/img/bg.jpg" alt="" srcset="">
                        <div class="club-item_content">
                          <div class="item_content-date">24 Jun, 5:40 PM</div>
                          <div class="item_content-desc">
                            【活动攻略】在彩虹下奔跑，墨尔本绝不可错过，Color Run低价抢票开始！
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="we-club-item">
                        <img class="club-item_img img-fluid" src="./assets/img/bg.jpg" alt="" srcset="">
                        <div class="club-item_content">
                          <div class="item_content-date">24 Jun, 5:40 PM</div>
                          <div class="item_content-desc">
                            【活动攻略】在彩虹下奔跑，墨尔本绝不可错过，Color Run低价抢票开始！
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="we-club-item">
                        <img class="club-item_img img-fluid" src="./assets/img/bg.jpg" alt="" srcset="">
                        <div class="club-item_content">
                          <div class="item_content-date">24 Jun, 5:40 PM</div>
                          <div class="item_content-desc">
                            【活动攻略】在彩虹下奔跑，墨尔本绝不可错过，Color Run低价抢票开始！
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="we-club-showMore">
                <span class="font-10">SHOW MORE</span>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="news-advertise news-item-more-large margin-b-30">
              <img class="news-advertise-img img-fluid" src="./assets/img/bg.jpg">
              <div class="advertise-tag">
                <span class="font-9">ADVERTISE</span>
              </div>
              <div class="advertise-btn">
                <span class="font-10">VISIT SITE</span>
              </div>
            </div>
          </div>
        </div>

        <!-- load more -->
        <div class="row load-more flex-content-center">
          <span class="load-more-text">LOAD MORE</span>
        </div>
      </div>
    </section>


    <footer class="life-footer">
      <div class="footer-top">
        <div class="footer-top-tag">
          <span class="footer-top-tag-title">热门标签：</span>
          <span class="footer-top-tag-item">CMC market</span>
          <span class="footer-top-tag-item">Digital</span>
          <span class="footer-top-tag-item">Design</span>
          <span class="footer-top-tag-item">Art</span>
        </div>
        <div class="footer-top-link">
          <div class="footer-link-item">
            <img class="img-fluid" src="./assets/img/twitter-icon.png" alt="" srcset="">
          </div>
          <div class="footer-link-item">
            <img class="img-fluid" src="./assets/img/ins-icon.png" alt="" srcset="">
          </div>
          <div class="footer-link-item">
            <img class="img-fluid" src="./assets/img/face-icon.png" alt="" srcset="">
          </div>
          <div class="footer-link-item">
            <img class="img-fluid" src="./assets/img/youtube-icon.png" alt="" srcset="">
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <span class="footer-bottom-item">
          © 2016. Quantum UI kit
        </span>
        <span class="footer-bottom-item">Privacy Policy</span>
        <span class="footer-bottom-item">Terms of Use</span>
      </div>
    </footer>

  </div>
</body>
</html>